<template>
	<view class="container">
		<view class="content">

			<view class="member-list">
				<u-card v-for="item in memberData" :key="item._id" :border="false" shadow="none" class="member-card"
					@click="goToDetail(item)">
					<!-- 头像 + 信息区 -->
					<template #head>
						<u-avatar :src="item.otherId.avatar" size="60" shape="square"></u-avatar>
					</template>
					<template #body>
						<view class="member-info">
							<!-- 姓名、标签行 -->
							<view class="name-row">
								<!-- 姓名 -->
								<text class="name">{{ item.otherId.name || item.otherId._id }}</text>
								<!-- 标签：“本人”“默认成员”“关系” -->
								<u-tag v-if="item.otherId === userStore.userInfo._id" type="success" text="本人"
									class="tag-margin"></u-tag>
								<u-tag v-if="item.otherId === userStore.userInfo._id" type="warning" text="默认成员"
									class="tag-margin"></u-tag>
								<u-tag v-else :text="item.relationship" class="tag-margin"></u-tag>
							</view>

							<!-- 性别、年龄、签约状态等信息 -->
							<text class="desc">
								性别：{{ item.otherId.gender === 1 ? '男' : (item.otherId.gender === 0 ? '女' : '未知') }}
								年龄：{{ formatAge(item.otherId.birthday) }}岁
							</text>
							<text class="desc">
								地区：{{ item.otherId.address || '未知地区' }}
							</text>
						</view>
					</template>
				</u-card>
			</view>

			<!-- 新增家庭成员按钮 -->
			<u-button class="add-btn" type="primary" @click="goToAdd()">+ 新增家庭成员</u-button>

		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		useUserStore
	} from '../../../store/user'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';


	const userStore = useUserStore()
	const memberData = ref([])


	// 获取家庭成员数据
	const getMemberData = async () => {
		try {
			const res = await uni.request({
				url: 'http://nocat.life:3012/relations/search',
				method: 'POST',
				data: {
					ownId: userStore.userInfo._id
				}
			})

			if (res.data.code === 200) {
				console.log('家庭成员数据:', res.data.data)
				memberData.value = res.data.data
			} else {
				uni.showToast({
					title: res.data.message || '获取数据失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('请求错误:', error)
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			})
		}
	}

	// 跳转详情页
	const goToDetail = (item) => {
		// 将 item 转为 JSON 字符串
		const itemStr = encodeURIComponent(JSON.stringify(item));
		uni.navigateTo({
			// 传递完整 item 数据
			url: `/minePackage/pages/family-detail/family-detail?item=${itemStr}`,
		});
	};

	// 跳转添加家庭成员
	const goToAdd = () => {
		uni.navigateTo({
			url: '/minePackage/pages/family-add/family-add'
		})
	}

	// 从生日计算年龄
	const formatAge = (birthday) => {
		if (!birthday) return '未知'
		const birthYear = new Date(birthday).getFullYear()
		const currentYear = new Date().getFullYear()
		return currentYear - birthYear
	}

	onShow(() => {
		getMemberData()
	})
</script>
<style lang="scss" scoped>
	.container {
		// height: 100vh;
		background-color: rgba(242, 247, 251, 0.619607843137255);
	}

	.content {
		padding: 20rpx;
	}

	.member-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.member-card {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		padding: 12rpx;
	}

	.member-info {
		margin-left: 20rpx;
		flex: 1;
	}

	.name-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 10rpx;
	}

	.name-row {
		margin-bottom: 10rpx;

	}

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 6rpx;
		line-height: 1.4;
	}

	.tag-margin {
		margin-left: 10rpx;

	}

	.add-btn {
		margin-top: 30rpx;
	}
</style>